FeatherGIF helps you make GIF images with feathered edges for use on the Web. It’s a filter that works with popular paint programs like Photoshop.
This manual assumes that you are familiar with your paint software, and with simple web page development, and you need a way to save images in the GIF format. In particular, you should already know how to make a transparent GIF image and place it within a web page.
If you want to know more about transparent GIF images before starting, there’s an excellent document on the topic at http://dragon.jpl.nasa.gov/~adam/transparent.html.
You can check for new releases of FeatherGIF at ccn.cs.dal.ca/~aa731/feathergif.html.
Installing
Drop FeatherGIF into your paint program’s Plug-Ins folder. When you start your paint program, the Filter menu should contain an item called Flaming Pear, and that should lead to a sub-menu containing FeatherGIF.
Using
Make sure that your paint document is in the color mode that you plan to use for the final image. If you use the filter on a millions-of-colors image and later convert to, say, 256 colors, some pixels in the transparent portion of the image may be changed by the color conversion. If you prefer to use the millions-of-colors mode, be sure to check for this effect.
Choose the lasso tool and select an irregular area. Then, with Selection Operations, feather the edge of the selection.
Select the FeatherGIF filter. A dialog box will appear:
Click OK and see what happens. Your original selection should be enclosed in a fuzzy mark with a rectangular boundary.
Select this rectangular area, use your favorite method of saving it as a GIF with the color of the rectangular mark as the transparent color, and you’re in business.
Examining
Bring the filter back and behold the controls.
The first popup menu lets you say how the filter make the image transparent:
• Use selection as is: this uses the selection (and the mask, if you’re using one) to determine what's transparent and what’s not. Area that are 100% selected will stay opaque.
• Fade selection’s edge: this will produce a soft, vignetted edge. It produces a very similar result to “use selection as is” with a feathered selection; usually the latter works faster.
• Fade horizontal edges: the opacity of the sides of the selection will taper off. To set the width the of tapering, use the slider.
• Fade vertical edges: similar to “fade horizontal edges”.
• Fade along gradient: the opacity of the selection will taper in a direction that you specify by using the angle control. The more opaque side of the result will be on the same side as the green line in the angle control.
• 50 percent: a 50% screen of transparent pixels appears.
• Cut hole in graphics: the selection turns into a hole with a drop shadow inside.
• Cut hole in background: again, the selection turns into a hole with a drop shadow inside, but it is the area outside the selction which becomes transparent. Placed on a web page, this image will appear to be a hole cut in the page’s background.
• Diaphanize selection: the selection itself will become partly transparent. How much depends on the setting of the opacity slider. If opacity is 100%, nothing will happen; if opacity is 0%, the selection beocmes completely transparent.
Making fuzzy-edged drop shadows for use on graphic backgrounds
FeatherGIF can achieve this effect for you, though not in one step. Here are two ways to do it:
Method A
Open a new document. Decide what color your text should be, turn antialiasing off, and use your program’s text tool to draw the text.
Convert the text to a selection: usually this means selection the pointer tool and dragging it anyplace outside the text rectangle. Position the text-shaped selection right on top of the text.
Invert the selection.
Using your selection tools, trim the selected area down to a region around the text. Leave a border around the text at least as wide as the blur radius you will use in FeatherGIF.
Use FeatherGIF with “cut hole in graphic” and your choice of shadow settings and transparent color.
Select the text-and-shadow rectangle, and save it as a GIF with the proper transparency setting.
Method B
Open a new document and decide what color your shadow should be. With that color, blank out an area large enough to contain the finished graphic.
In another region of your document, use your program’s text tool to draw the text.
Convert the text to a selection, and drag the text-shaped selection to the middle of the shadow area.
Feather the selection, perhaps Outward by 8 pixels.
Now it’s time to chose your transparent color.
• If the text is not going to be anti-aliased, the it doesn’t much matter what you choose for the transparent color, as long as it’s different from the shadow and the text.
• If the text is going to be anti-aliased, then choose the average color of the background you mean to use this graphic with. This is important since hues close to the transparent color will appear in the edges of antialiased text. If your planned background tile is strongly multicolored, choose 50% gray.
Set the foreground color to your transparent color choice.
Use FeatherGIF with “use selection as is” and “invisible color is foreground.”
Now you should have a shadow surrounded by a transparency halo.
Enlarge the area around the halo by drawing some blocks of transparent color. Cover an area large enough to accomodate your text.
At last, choose whatever colors you like and draw the text again near the shadow. Make sure all the text falls on the transparent-halo area.
Select the text-and-shadow rectangle, and save it as a GIF with the proper transparency setting.
Finding out more
• Besides Photoshop 2.5 or later, FeatherGIF also works with Color It and The Cheaper Image. The latter is a simple, free paint program available online from MacUser’s web site; check http://www.zdnet.com/macuser/software/ to download it.
• FeatherGIF is shareware. If you would like to continue using it, you can register it for US$20 by running the Register program that came with it.
• You can check for new releases of FeatherGIF at ccn.cs.dal.ca/~aa731/feathergif.html. If you have ideas for improvements, or commentary, or questions, please email the author at lloyd@kagi.com.
• Adobe makes a GIF export plug-in for Photoshop: try www.adobe.com.
